<template>
  <a-drawer v-model:visible="visible" title="UI测试报告详情" :width="width >= 580 ? 580 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <a-descriptions-item label="">{{ dataDetail?.id }}</a-descriptions-item>
      <a-descriptions-item label="所属报告ID">{{ dataDetail?.reportId }}</a-descriptions-item>
      <a-descriptions-item label="执行状态">{{ dataDetail?.executeState }}</a-descriptions-item>
      <a-descriptions-item label="断言状态">{{ dataDetail?.assertionState }}</a-descriptions-item>
      <a-descriptions-item label="异常信息">{{ dataDetail?.exceptionMsg }}</a-descriptions-item>
      <a-descriptions-item label="消耗时间">{{ dataDetail?.expandTime }}</a-descriptions-item>
      <a-descriptions-item label="所属UI用例ID">{{ dataDetail?.caseId }}</a-descriptions-item>
      <a-descriptions-item label="序号">{{ dataDetail?.num }}</a-descriptions-item>
      <a-descriptions-item label="步骤名称">{{ dataDetail?.name }}</a-descriptions-item>
      <a-descriptions-item label="步骤操作类型">{{ dataDetail?.operationType }}</a-descriptions-item>
      <a-descriptions-item label="UI元素定位类型">{{ dataDetail?.locationType }}</a-descriptions-item>
      <a-descriptions-item label="UI元素定位表达式">{{ dataDetail?.locationExpress }}</a-descriptions-item>
      <a-descriptions-item label="元素查找最长等待时间">{{ dataDetail?.elementWait }}</a-descriptions-item>
      <a-descriptions-item label="目标UI元素定位类型">{{ dataDetail?.targetLocationType }}</a-descriptions-item>
      <a-descriptions-item label="目标UI元素定位表达式">{{ dataDetail?.targetLocationExpress }}</a-descriptions-item>
      <a-descriptions-item label="目标元素查找最长等待时间">{{ dataDetail?.targetElementWait }}</a-descriptions-item>
      <a-descriptions-item label="步骤值">{{ dataDetail?.value }}</a-descriptions-item>
      <a-descriptions-item label="预期属性">{{ dataDetail?.expectKey }}</a-descriptions-item>
      <a-descriptions-item label="预期值">{{ dataDetail?.expectValue }}</a-descriptions-item>
      <a-descriptions-item label="步骤描述">{{ dataDetail?.description }}</a-descriptions-item>
      <a-descriptions-item label="断言失败是否继续执行">{{ dataDetail?.isContinue }}</a-descriptions-item>
      <a-descriptions-item label="是否截图">{{ dataDetail?.isScreenshot }}</a-descriptions-item>
      <a-descriptions-item label="截图url">{{ dataDetail?.screenshotUrl }}</a-descriptions-item>
      <a-descriptions-item label="乐观锁">{{ dataDetail?.version }}</a-descriptions-item>
      <a-descriptions-item label="业务状态">{{ dataDetail?.status }}</a-descriptions-item>
      <a-descriptions-item label="逻辑删除 1: 已删除， 0: 未删除">{{ dataDetail?.isDeleted }}</a-descriptions-item>
      <a-descriptions-item label="创建者">{{ dataDetail?.createdBy }}</a-descriptions-item>
      <a-descriptions-item label="更新者">{{ dataDetail?.updatedBy }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createdAt }}</a-descriptions-item>
      <a-descriptions-item label="更新时间">{{ dataDetail?.updatedAt }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'
import { type ReportDetailUiDetailResp, getReportDetailUi } from '@/apis'

const { width } = useWindowSize()

const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<ReportDetailUiDetailResp>()
// 查询详情
const getDataDetail = async () => {
  const res = await getReportDetailUi(dataId.value)
  dataDetail.value = res.data
}

// 打开详情
const onDetail = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onDetail })
</script>

<style lang="scss" scoped></style>
